<!-- 分组弹窗组件 -->
<template>
  <u-popup
    :show="show"
    mode="center"
    width="90%"
    height="auto"
    @close="onClose"
    :closeable="true"
    :closeOnClickOverlay="false"
    :border-radius="10"
  >
    <view class="group-popup-container">
      <view class="popup-header">
        <text class="popup-title">{{ isEdit ? '编辑分组' : '新建分组' }}</text>
      </view>
      
      <view class="popup-content">
        <group-form 
          :groupData="groupData" 
          :isEdit="isEdit"
          :listId="listId"
          @submit="onSubmit" 
          @cancel="onClose"
        />
      </view>
    </view>
  </u-popup>
</template>

<script>
import GroupForm from './GroupForm.vue'

export default {
  name: 'GroupPopup',
  components: {
    GroupForm
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    // 编辑模式下传入的分组数据
    groupData: {
      type: Object,
      default: () => ({})
    },
    // 是否为编辑模式
    isEdit: {
      type: Boolean,
      default: false
    },
    // 所属清单ID
    listId: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 关闭弹窗
    onClose() {
      this.$emit('close');
    },
    
    // 提交表单
    onSubmit(groupData) {
      console.log('GroupPopup提交表单', groupData);
      this.$emit('submit', groupData);
      this.onClose();
    }
  }
}
</script>

<style lang="scss" scoped>
.group-popup-container {
  background-color: var(--background-color);
  border-radius: 10px;
  overflow: hidden;
}

.popup-header {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: linear-gradient(to right, #f8f8f8, #ffffff);
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color);
}

.popup-content {
  max-height: 70vh;
  overflow-y: auto;
}
</style> 